import React, { FC, MouseEvent } from 'react'
import { Spin } from 'antd'
import styles from './EidtCanvas.module.scss'
import { useDispatch } from 'react-redux'
import classNames from 'classnames'

// import QuestionInput from '../../../components/QuestionComponents/QuestionInput/Component'
// import QuestionTitle from '../../../components/QuestionComponents/QuestionTitle/Component'
import useGetComponentInfo from '../../../hooks/useGetComponentInfo'
import { getComponentConfByType } from '../../../components/QuestionComponents/index'
import { ComponentInfoType, changeSleectedId, moveCompoent } from '../../../store/componetnsReducer'
import useBindCanvasKeyPress from '../../../hooks/useBindCanvasKeyPress'
import SortableContainer from '../../../components/DragSorttable/SortableContainer'
import SortableItem from '../../../components/DragSorttable/SortableItem'
type PropsType = {
  loading: boolean
}
function genComponent(componentInfo: ComponentInfoType) {
  const { type, props } = componentInfo
  const componentConf = getComponentConfByType(type)
  if (componentConf == null) return null
  const { Component } = componentConf
  return <Component {...props} />
}
const EidtCanvas: FC<PropsType> = ({ loading }) => {
  const { componetnList, selectedId } = useGetComponentInfo()
  // 绑定快捷键
  useBindCanvasKeyPress()
  const dispatch = useDispatch()
  function handleClick(event: MouseEvent, id: string) {
    event.stopPropagation() //阻止冒泡
    dispatch(changeSleectedId(id))
  }
  if (loading) {
    return (
      <div style={{ textAlign: 'center', marginTop: '24px' }}>
        <Spin />
      </div>
    )
  }
  //SortableContainer组件必须要一个id属性
  const componetnListWithId = componetnList.map(c => ({ ...c, id: c.fe_id }))
  //拖拽函数结束
  function onDragEnd(oldIndex: number, newIndex: number) {
    dispatch(moveCompoent({ oldIndex, newIndex }))
  }
  return (
    <SortableContainer items={componetnListWithId} onDragEnd={onDragEnd}>
      <div className={styles.canvas}>
        {componetnList
          .filter(i => !i.isHidden)
          .map(c => {
            const { fe_id, isLocked } = c
            const wrapperDefaultClassName = styles['component-wrapper']
            const selectedClassName = styles.selected
            const lockedClassName = styles.locked
            const wrapperClassName = classNames({
              [wrapperDefaultClassName]: true,
              [selectedClassName]: fe_id === selectedId,
              [lockedClassName]: isLocked,
            })
            return (
              <SortableItem key={fe_id} id={fe_id}>
                <div  className={wrapperClassName} onClick={e => handleClick(e, fe_id)}>
                  <div className={styles.component}>{genComponent(c)}</div>
                </div>
              </SortableItem>
            )
          })}
        {/* <div className={styles['component-wrapper']}>
        <div className={styles.component}>
          <QuestionInput />
        </div>
      </div>
      <div className={styles['component-wrapper']}>
        <div className={styles.component}>
          <QuestionTitle />
        </div>
      </div> */}
      </div>
    </SortableContainer>
  )
}
export default EidtCanvas
